<template>
  <div class="content">
    <div class="contentForm">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :disabled="Boolean(ruleForm.id)"
        :rules="rules"
        label-position="top"
        label-width="120px"
        class="form"
      >
        <div class="formTitle rowFlex columnCenter"> <span class="border"></span> 活动信息</div>
        <el-form-item
          label="活动标题"
          prop="title"
        >
          <template slot="label">
            活动标题
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              popper-class="tooltipWidth"
            >
              <div slot="content">
                <p>用于小程序端活动详情页面中的活动标题配置</p>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <el-input
              v-model="ruleForm.title"
              clearable
              placeholder="请输入活动标题"
              style="width: 80%;"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="活动名称"
          prop="name"
        >
          <template slot="label">
            活动名称
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              popper-class="tooltipWidth"
            >
              <div slot="content">
                <p>用于掌娱平台中搜索、显示</p>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <el-input
              v-model="ruleForm.name"
              clearable
              placeholder="请输入活动名称"
              style="width: 80%;"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          v-if="tabsActive==1"
          label="充值档位"
          prop="recharge_config.amount"
        >
          <div class="chargeRetain">
            <div class="chargeRetainContent">
              <div class="retainContent">
                <div class="rechargeContent columnFlex rowCenter">
                  <div
                    class="gearRetain rowFlex rechargeItem"
                    style="padding-bottom:20px;"
                  >
                    <span style="margin-right: 10px;">档位</span>
                    <el-select
                      v-model="ruleForm.recharge_config.type"
                      :clearable="false"
                      placeholder="请选择"
                      style="width: 100px"
                      @change="rechargeChange"
                    >
                      <el-option
                        v-for="it in selectOption"
                        :key="it.value"
                        :label="it.label"
                        :value="it.value"
                      > </el-option>
                    </el-select>
                    <div v-if="ruleForm.recharge_config.type == 1">
                      <div>
                        <span style="margin: 0 10px">充</span>
                        <el-input
                          v-model="ruleForm.recharge_config.amount"
                          :clearable="false"
                          type="number"
                          style="width: 100px"
                          placeholder="请输入金额"
                          @input="moneyInput"
                          @blur="moneyBlur"
                        ></el-input>
                        <span style="margin: 0 10px">元，赠</span>
                        <el-input
                          v-model="ruleForm.recharge_config.free_coin"
                          clearable
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          style="width: 100px"
                          placeholder="请输入金额"
                          @blur="moneyBlur2"
                        ></el-input>
                        <span style="margin: 0 10px">赠币</span>
                      </div>
                    </div>
                    <div
                      v-else
                      class="vip_amount"
                    >
                      <el-input
                        v-model="ruleForm.recharge_config.amount"
                        clearable
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                        :style="'width: 200px; margin-left: 20px ;'"
                        placeholder="请输入金额"
                      ></el-input>
                      <span style="margin: 0 10px">元</span>
                    </div>
                  </div>
                  <div
                    v-if="ruleForm.recharge_config.type==1"
                    class="infoIcon"
                    style="display: flex; align-items: center; margin-left: 0;margin-top:-20px;"
                  >
                    <div class="subText">即:{{ parseFloat((ruleForm.recharge_config.amount * 100).toFixed(2)) || 0 }}喵币+{{ ruleForm.recharge_config.free_coin || 0 }}赠币</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <!-- v-if="tabsActive==2" -->
        <el-form-item
          v-if="tabsActive==2"
          label="活动类型"
          prop="recharge_num"
        >
          <div class="rowFlex columnCenter activeStatus">
            <el-input
              v-model="rechargeType"
              style="width:80px;"
              :disabled="true"
            ></el-input>
            <span style="margin:0 10px;">赠</span>
            <el-input-number
              v-model="ruleForm.coin_num"
              controls-position="right"
              style="width:100px;"
              :max="1000"
              @input.native="numChange"
            ></el-input-number> <span style="margin:0 10px;">赠币</span>
            <p style="color:#E47D00;">最大可填写数量为:1000</p>
          </div>
        </el-form-item>
        <!-- 充值活动 -->
        <el-form-item
          v-if="tabsActive==1"
          label="充值类型"
          prop="recharge_num"
        >
          <template slot="label">
            充值类型
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              popper-class="tooltipWidth"
            >
              <div slot="content">
                <p>1. 按活动充值：在活动有效期内，一共可充值次数</p>
                <p> 2. 按天充值：在活动有效期内，一天之内可充值的次数</p>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div class="rechargeType rowFlex columnCenter ">
            <el-select
              v-model="ruleForm.recharge_type"
              :clearable="false"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                label="按活动充值"
                :value="1"
              ></el-option>
              <el-option
                label="按天充值"
                :value="2"
              ></el-option>
            </el-select>
            <p style="margin:0 10px;">充值次数</p>
            <el-select
              v-model="ruleForm.recharge_num"
              :clearable="false"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="(item,index) in 3"
                :key="index"
                :label="item+'次'"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <!-- 赠币活动 -->
        <el-form-item
          v-if="tabsActive==2"
          label="领取类型"
          prop="recharge_num"
        >
          <template slot="label">
            领取类型
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              popper-class="tooltipWidth"
            >
              <div slot="content">
                <p>1. 按活动领取：在活动有效期内，一共可领取次数</p>
                <p>2. 按天领取：在活动有效期内，一天之内可领取的次数</p>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div class="rechargeType rowFlex columnCenter ">
            <el-select
              v-model="ruleForm.recharge_type"
              :clearable="false"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                label="按活动领取 "
                :value="1"
              ></el-option>
              <el-option
                label="按天领取"
                :value="2"
              ></el-option>
            </el-select>
            <p style="margin:0 10px;"> 领取次数</p>
            <el-select
              v-model="ruleForm.recharge_num"
              :clearable="false"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="(item,index) in 3"
                :key="index"
                :label="item+'次'"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label="活动起止时间:"
          prop="start_time"
        >
          <BiDatePicker
            v-model="ruleForm.active_time"
            clearable
            :style="{'width':'80%'}"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :default-time="['00:00:00','23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selectChange"
          />
        </el-form-item>
        <el-form-item
          v-if="tabsActive==1"
          label="活动状态"
          prop="show_status"
        >
          <template slot="label">
            活动状态
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              popper-class="tooltipWidth"
            >
              <div slot="content">
                <p>1. 当选择“展示”活动时，该活动可根据配置的模板显示在小程序端相应位置</p>
                <p>2. 当选择“隐藏”活动时，则不显示在小程序端，但活动仍有效</p>
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <el-radio-group v-model="ruleForm.show_status">
              <el-radio :label="1">展示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item
          label="活动模板"
          prop="template"
        >
          <el-radio-group
            v-model="ruleForm.template"
            class="rowFlex"
            @change="templateChange"
          >
            <div
              v-for="(item, index) in templateList"
              :key="index"
              class="columnFlex columnCenter"
              style="float:left;margin-right:20px;"
            >
              <el-image
                class="templateImage"
                :src="item.preview"
                alt=""
              ></el-image>
              <el-radio
                style="margin-top:10px;"
                :label="Number(item.id)"
              ><span></span></el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <div v-if="tabsActive==1">
          <div class="formTitle rowFlex columnCenter"> <span class="border"></span> 受众用户</div>
          <filterUser :rule-form="ruleForm" />
        </div>
      </el-form>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        :disabled="Boolean(ruleForm.id)"
        @click="submit"
      >创 建</el-button>
    </span>

    <el-drawer
      :visible="showImage"
      size="420px"
      :modal="false"
      :modal-append-to-body="false"
      class="giftDetails"
      @close="showImage = false"
    >
      <div class="imageContent rowFlex allCenter">
        <el-image
          :src="imageSrc"
          fit="contain"
          style="width:338px;"
        ></el-image>
        <div
          v-if="false"
          class="redPick"
        >
          <el-image :src="templateItem.button"></el-image>
          <p class="text rowFlex allCenter">{{ tabsActive==1?'点击充值':'点击领取' }}</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { validateDiscount, checkMoney } from '@/utils/index'
import { prodctTypeList } from '@/api/recharge'
import { paymentList } from '@/api/payment'
import { templateList, activitySave, activitySwitch } from '@/api/active'
import filterUser from './filterUser'
export default {
  components: {
    filterUser
  },
  props: {
    row: {
      type: Object,
      default: {}
    },
    tabsActive: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        type: '',
        mini_app_id: '',
        name: '',
        title: '',
        recharge_type: 1,
        recharge_num: 1,
        active_time: [],
        show_status: 0,
        template: '',
        start_time: '',
        end_time: '',
        coin_num: '',
        member_attribute: {
          operation: 1, // 当前版本只有1（且）
          condition: [
            {
              type: 'reg_time',
              start: 0,
              end: 0,
              unit: 1,
              range: 1,
              status: 1,
              mode: 1
            }
          ]
        },
        recharge_config: { type: '1', amount: 0, coin: 0, free_coin: 0, vipText: '充值喵币' }
      },
      rechargeType: '赠送活动',
      paymentRestrict: {},
      free_coin_scale: 0,
      selectOption: [],
      templateList: [],
      showImage: false,
      imageSrc: '',
      templateItem: {},
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
        'recharge_config.amount': [{ required: true, message: '请输入充值档位', trigger: 'blur' }],
        start_time: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
        show_status: [{ required: true, message: '请选择活动状态', trigger: 'change' }],
        recharge_num: [{ required: true, message: '请选择充值次数', trigger: 'blur' }],
        template: [{ required: true, message: '请选择活动模板', trigger: 'change' }]
      }
    }
  },
  async mounted() {
    this.ruleForm.type = this.tabsActive
    await this.paymentInfo()
    this.init()
    this.GetProdctTypeList()
    this.requestTemplateList()
  },
  methods: {
    numChange(e) {
      e.target.value = e.target.value.replace(/[^\d]/g, '')
    },
    templateChange(value) {
      const findItem = this.templateList.find((item) => item.id == value)
      this.templateItem = findItem
      this.imageSrc = findItem.preview
      this.showImage = true
    },
    rechargeChange(value) {
      if (value) {
        const findItem = this.selectOption.find((item) => item.value == value)
        this.ruleForm.recharge_config.amount = 0
        this.ruleForm.recharge_config.vipText = findItem.label
      }
    },
    async GetProdctTypeList() {
      const res = await prodctTypeList()
      if (res.status_code == 1) {
        const index = res.data.findIndex((item) => item.value === 9)
        res.data.splice(index, 1)
        const activityIndex = res.data.findIndex((item) => item.value === 11)
        res.data.splice(activityIndex, 1)
        this.selectOption = res.data.map((item) => {
          this.handleFreeLimit(item)
          return {
            ...item,
            value: item.value + ''
          }
        })
      }
    },
    async requestTemplateList() {
      try {
        const res = await templateList()
        if (res.status_code == 1 && res.data.length > 0) {
          this.templateList = res.data
          // this.ruleForm.template = res.data[0].id
        }
      } catch (error) {}
    },
    selectChange(value) {
      if (value) {
        this.ruleForm.start_time = value[0]
        this.ruleForm.end_time = value[1]
      } else {
        this.ruleForm.start_time = ''
        this.ruleForm.end_time = ''
      }
    },
    handleFreeLimit(item) {
      switch (item.value) {
        case 1: // 充值喵币送赠币的比例
          item.free_coin_limit = 'coin_height'
          break
        case 2: // 会员包年
          item.free_coin_limit = 'vip_year'
          break
        case 3: // 会员包3天
          item.free_coin_limit = 'vip_three_day'
          break
        case 4: // 包7天
          item.free_coin_limit = 'vip_week'
          break
        case 5: // 包15天
          item.free_coin_limit = 'vip_half_month'
          break
        case 6: // 包月
          item.free_coin_limit = 'vip_month'
          break
        case 7: // 包季
          item.free_coin_limit = 'vip_season'
          break
        case 8: // 半年
          item.free_coin_limit = 'vip_half_year'
          break
        case 9: // 解锁全集
          item.free_coin_limit = 'single_playlet'
          break
        case 10: // 包1天
          item.free_coin_limit = 'vip_day'
          break
        default:
          break
      }
      item.free_coin_limit_value = this.paymentRestrict[item.free_coin_limit]
    },
    init() {
      // this.requestCommonData({ type: 'merchant' })
      // 编辑的时候
      if (this.row.id) {
        const row = JSON.parse(JSON.stringify(this.row))
        this.ruleForm.recharge_type = Number(row.recharge_type)
        this.ruleForm = row
        this.ruleForm.active_time = [row.start_time, row.end_time]
        this.ruleForm.template = Number(row.template)
        this.ruleForm.show_status = Number(row.show_status)
        this.ruleForm.recharge_type = Number(row.recharge_type)
        this.ruleForm.id = row.id
        if (row.member_attribute.condition?.length > 0) {
          this.ruleForm.member_attribute.condition = row.member_attribute.condition.map((item) => item.source)
        }
      }
    },
    close() {
      this.$emit('cancel')
    },
    paymentInfo() {
      return new Promise((resolve, reject) => {
        paymentList().then((res) => {
          if (res.data.data && res.data.data.limit_config) {
            this.paymentRestrict = res.data.data.limit_config
            this.free_coin_scale = this.paymentRestrict.coin_height
          }
          resolve(res)
        })
      })
    },
    moneyInput() {
      this.ruleForm.recharge_config.amount = checkMoney(Number(this.ruleForm.recharge_config.amount))
    },
    moneyBlur2() {
      this.ruleForm.recharge_config.free_coin = Number(this.ruleForm.recharge_config.free_coin)
    },
    moneyBlur() {
      this.ruleForm.recharge_config.amount = Number(this.ruleForm.recharge_config.amount)
    },
    handleAmountLimit(list) {
      list.forEach((item) => {
        // 找出类型相同项
        const isLimit = this.selectOption.find((items) => items.value === item.type)
        // 会员的充值限制
        this.$message.close()
        if (isLimit && Number(item.amount) < Number(isLimit.free_coin_limit_value) && isLimit.free_coin_limit !== 'coin_height') {
          this.$message.warning(`${isLimit.label}最低${isLimit.free_coin_limit_value}元`)
          this.isLimit = true
          return
        } else if (isLimit.free_coin_limit === 'coin_height') {
          if (this.free_coin_scale && this.free_coin_scale !== '') {
            if (item.free_coin > item.amount * this.free_coin_scale) {
              this.$message.warning(`当前档位赠币最多${Math.floor(item.amount * this.free_coin_scale)}`)
              this.isLimit = true
              return
            }
          } else {
          }
        } else {
        }
      })
    },
    handleForm() {
      const data = JSON.parse(JSON.stringify(this.ruleForm))
      if (data.member_attribute.condition && data.member_attribute.condition.length > 0) {
        data.member_attribute.condition.map((item) => {
          if (item.type === 'reg_time' && item.mode == 1) {
            this.$message.close()
            if ((!item.start || !item.end) && item.type === 'reg_time') {
              this.$message.close()
              this.$message.warning('请输入数字')
              this.isLimit = true
              return
            }
            if (item.start >= item.end) {
              this.$message.close()
              this.$message.warning('开始时间不能大于等于结束时间')
              this.isLimit = true
              return
            }
            delete item.status
          } else if (item.type === 'reg_time' && item.mode == 2) {
            this.$message.close()
            if (!item.start || !item.end) {
              this.$message.warning('请选择时间')
              this.isLimit = true
            }
            return
          } else if (item.type === 'pay_status') {
            delete item.end
            delete item.start
            delete item.range
          } else {
          }
          if (this.isLimit) {
            this.$message.close()
            return
          }
        })
      }
      delete data.active_time
      return data
    },
    submit() {
      this.isLimit = false
      if (!this.isLimit) {
        this.handleAmountLimit([this.ruleForm.recharge_config])
      }

      if (this.tabsActive == 1) {
        if (this.ruleForm.recharge_config.type == 1) {
          if (Number(this.ruleForm.recharge_config.amount) <= 0) {
            this.$message.warning('请输入大于0的数字')
            this.isLimit = true
            return
          }
          if (Number(this.ruleForm.recharge_config.free_coin) <= 0) {
            this.$message.warning('请输入大于0的数字')
            this.isLimit = true
            return
          }
        }
      } else {
        if (Number(this.ruleForm.coin_num) <= 0) {
          this.$message.warning('赠送喵币不能为0')
          this.isLimit = true
        }
      }
      let formData = {}
      if (this.tabsActive == 1) {
        formData = this.handleForm()
      } else {
        formData = JSON.parse(JSON.stringify(this.ruleForm))
      }
      if (this.isLimit) {
        return
      }
      setTimeout(() => {
        this.isLimit = false
      }, 2000)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.activitySave(formData)
        } else {
        }
      })
    },
    async activitySave(data) {
      try {
        const res = await activitySave(data)
        this.loading = false
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
        }
      } catch (error) {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
}
.left {
  width: 400px;
  height: 100%;
  background-color: #fff;
  position: fixed;
  right: 800px;
  top: 0;
  .top {
    padding: 0 20px;
    height: 58px;
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    i {
      font-size: 20px;
    }
  }
  .content {
    height: calc(100% - 58px);
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.messages {
  margin: 20px 20px 0 20px;
  display: flex;
  color: #e6a23c;
  background: #fdf6ec;
  border-radius: 4px;
  border: 1px solid #f2bc69;
  padding: 5px;
  .text {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 20px;
    margin-left: 9px;
  }
}
.vip_amount {
  position: relative;
  .vip_year_tipe {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -15px;
    font-size: 10px;
    color: red;
    height: 15px;
    line-height: 15px;
  }
}
.recommend {
  align-items: center;
  height: 40px;
}
.content {
  .form {
    padding: 20px;
  }
  .dialog-footer {
    position: relative;
  }
  .contentForm {
    width: 100%;
    height: calc(100% - 70px);
    overflow-y: auto;
    .el-popper {
      max-width: 200px !important;
    }
  }
  .setLabel {
    span {
      font-size: 15px;
      font-weight: 500;
    }
  }
  .iconFont {
    font-size: 20px;
    color: #06c261;
    margin-left: 10px;
    position: relative;
    bottom: -2px;
    cursor: pointer;
  }
  .infoIcon {
    height: 40px;
    margin-left: 20px;
  }
  // 充值挽留
  .chargeRetain {
    .title {
      font-size: 15px;
      margin-bottom: 20px;
      font-weight: 500;
      color: #1d2129;
    }
    .chargeRetainContent {
      width: 80%;
      height: auto;
      background: #f7f8fa;
      padding-left: 20px;
      .attribute {
        width: 100%;
        height: 100px;
      }
      .huoLeft {
        position: relative;
        width: 1px;
        width: 15px;
        border-right: 2px solid rgba($color: #00bf8a, $alpha: 0.2);
        margin-right: 20px;
        height: 100%;
        .and_or {
          position: absolute;
          top: 50%;
          left: 5px;
          transform: translateY(-10px);
          color: #06c261;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 18px;
          background: #eaf7f3;
          border-radius: 4px;
          cursor: pointer;
          user-select: none;
        }
      }
      .huoLeft::before {
        content: ' ';
        display: block;
        width: 15px;
        height: 1px;
        background: rgba($color: #00bf8a, $alpha: 0.5);
        position: absolute;
        left: 7px;
      }
      .huoLeft::after {
        content: ' ';
        display: block;
        width: 15px;
        height: 1px;
        background: rgba($color: #00bf8a, $alpha: 0.5);
        position: absolute;
        left: 7px;
        bottom: 0;
      }
      .huoRight {
        width: 100%;
        padding: 10px 0;
        .huoRightItem {
          margin-bottom: 20px;
        }
      }
    }
    .retainContent {
      width: 100%;
      height: auto;
      .subText {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f6a400;
      }
    }
    .gearRetain {
      margin-top: 15px;
      width: 100%;
      ::v-deep .el-form-item--small.el-form-item {
        margin-bottom: 0px;
      }
    }
  }
  .firstRecharge {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
    .rechargeItem {
      background: #f7f8fa;
      margin-bottom: 5px;
      padding: 10px 0 0 10px;
      span {
        margin: 0 10px;
      }
      .subText {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f6a400;
      }
    }
  }

  // 新增的样式
  .formTitle {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 10px;
    line-height: 16px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 16px;
    .border {
      width: 3px;
      height: 15px;
      background: #00bf8a;
      margin-right: 6px;
    }
  }
  //
  .rechargeType {
    width: 80%;
    height: auto;
    background: #f7f8fa;
    padding: 20px;
  }
  .templateImage {
    max-width: 100px;
  }
  .activeStatus {
    width: 80%;
    height: auto;
    background: #f7f8fa;
    padding: 20px;
  }
  .giftDetails {
    position: fixed;
    right: 800px;
    top: 0;
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05);
  }
  .imageContent {
    position: relative;
    .redPick {
      width: 180px;
      height: 46px;
      border-radius: 25px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 450px;
      z-index: 10;
      .text {
        font-size: 17px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #b63200;
        width: 180px;
        height: 46px;
        z-index: 20;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
</style>